<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>已售商品信息</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
    </el-breadcrumb>

    <!-- 白色区域内容 -->
    <div class="page_content">
      <div class="flex">
        <div class="input_box">
          <el-input v-model="input3" placeholder="按照分类名搜索" class="input-with-select">
            <template #append>
              <el-button @click="searchByName"><i class="el-icon-search"></i><el-icon><Search /></el-icon></el-button>
            </template>
          </el-input>
        </div>

      

        <!-- <el-button type="danger" @click="showDeleteCheckbox=!showDeleteCheckbox">{{ showDeleteCheckbox ? '取消删除' : '删除' }}</el-button>
          <el-button type="button" @click="addDialogVisible = true" class="myButton">新建</el-button>
        </div> -->
      </div>
      <!-- 显示复选框 -->
      <el-table :data="tableData" stripe style="width: 100%"  @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" :selectable="showDeleteCheckbox"></el-table-column> -->
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="商品名"/>
        <el-table-column prop="number" label="单次购买数量"  />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="property" label="口味" />
        <el-table-column prop="remark" label="评价" />
        <el-table-column prop="createdTime" label="时间" />
        
         

      </el-table>

     
    <div class="pagination">
    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5,10,20,30]" :small="small" :disabled="disabled"
      :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

  </div>
   </div>
</template>

<script setup>
import { h, onMounted, reactive, ref } from 'vue';
import axios from '../../utils/axios';
import { ElMessageBox, ElMessage } from 'element-plus';

let tableData = reactive([]);
const input3 = ref('');
//分页设置
let page = 1;
let size = 5;
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const total = ref(0)

const showDeleteCheckbox = ref(false);
let selectedRows = reactive([]);
let seletionIds = reactive([]);

const handleSizeChange = (val) => {
  size = val;
  refreshTableData();
} 
const handleCurrentChange = (val) => {
  page = val;
  refreshTableData();
}

const handleDetail = (row) => {
  ElMessageBox({
    title: '用户信息详情',
    message: h('div', null, [
      h('p', null, `订单状态: ${row.status_text}`),
      h('p', null, `订单号:${row.order_no}`),
      h('p', null, `支付方式：${row.pay_mode}`),
      h('p', null, `用户联系方式：${row.mobile}`),
      h('p', null, `下单用户名：${row.user_name}`),
        h('p', null, `下单种类：${row.orderType}`),
         h('p', null, `下单商品数：${row.goods_num}`),
          h('p', null, `外卖花费时间：${row.sended_time}`),
        h('p', null, `用户评价:${row.remark}`),
        h('p', null, `用户下单时间:${row.created_at}`),
          h('p', null, `制作完成时间：${row.productioned_time}`),
        h('p', null, `骑手取货时间: ${row.taked_time}`),
         h('p', null, `消费金额: ${row.amount}`),
          h('p', null, `订单备注: ${row.postscript}`)
    ]),
  });
};


const handleSelectionChange = (value) => {
  selectedRows = reactive([]);
  selectedRows.value = value;
};


const formatSex = (row) => {
return row.sex ? '女' : '男';
};

const formatIsUse = (row) => {
return row.isUse ? '否' : '是';
};

//根据名字模糊查询
const searchByName = () => {
  if (!input3.value) {
   refreshTableData();
  } else {
    axios.get(`/buyed-goods/search/${input3.value}`).then((res) => {
      console.log('提交查询：', input3.value);
      console.log('res为：', res);
      console.log('res.data:', res.data);
      if (res.code === 200) {
        const result = res.data;
        tableData.splice(0, tableData.length);
        for (let i in result) tableData.push(result[i]);
        console.log(',tableData：', tableData);
      } else {
        ElMessage.error(res.msg);
      }
    }).catch((err) => {
      console.error(err);
      ElMessage.error('获取分类列表失败');
    });
  }
};


//初始化请求数据
const refreshTableData = () => {
  axios.get(`/buyed-goods/list/${page}/${size}`).then((res) => {
    console.log("res为：")
    console.log(res)
    if (res.code == 200) {

      tableData.splice(0, tableData.length);
      total.value = res.data.total
      const result = res.data.list;
      for (let i in result) tableData.push(result[i]);
       console.log("tabl0eData")
      console.log(tableData)
    } else {
      ElMessage.error(res.msg);
    }
  }).catch((err) => {
    console.log(err);
    ElMessage.error('获取菜单列表失败');
  });
};

onMounted(() => {
  refreshTableData();
});

</script>

<style scoped>
.page_content {
  margin: 20px;
  padding: 20px;
  background-color: white;
}

.flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /* margin-right: 5px; */
  padding: 10px;
}

.myButton {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  background-color: #5ad2ad;
  border-color: #8ddc88;
  color: white;
  float:right;
}

.myButton1 {
  margin-right: 70px;
  height: 32px;
  line-height: 30px;
  background-color: #70a6e0;
  border-color: #80b4ec;
  color: white;
  float:right;
}
.input_box .el-input {
  width: 250px;
}

.el-button.link {
  color: #8ddc88;
  background-color: transparent;
  border-color: transparent;
}

.dialog-footer {
  text-align: right;
}
</style>